import { Button } from 'antd'
import React, { useContext, useState } from 'react'
import { useParams } from 'react-router-dom'


const MyContext = React.createContext({})

const Header = () =>
{
    const { name, buttonText } = useContext(MyContext)
    return (
        <div>
            <p>{name}:{buttonText}</p>
        </div>
    )
}

const Footer = () =>
{
    const { name, age, buttonText } = useContext(MyContext)
    return (
        <div>message for {name},your age is {age},{buttonText}</div>
    )
}


export default function Hook()
{
    let { name } = useParams()
    const [buttonText, setbuttonText] = useState("还没点呢")
    const [MyClick, setMyClick] = useState(false)
    const ifClick = (e) =>
    {
        setMyClick(!MyClick)
        return setbuttonText(MyClick ? "🌏" : "☀")
    }
    return (
        <MyContext.Provider value={{
            name: 'lzy',
            age: 21,
            buttonText: buttonText
        }}>
            <Header />
            My Name from Path:{name}
            <Button onClick={ifClick}>{buttonText}</Button>
            <Footer />
        </MyContext.Provider>
    )
}
